<template>
	<view class="content display  displayColumn displaycenter_aliem">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">订单详情</text>
			</template>
		</u-navbar>
		<view class="fn_items display  displayColumn M-T24">
			<view class="item_one display  displaycenter_aliem">
				<span class="fn_txt1 M-L24">中南加油站</span>
				<span class="fn_txt2 M-R24">￥<span style="font-size: 40rpx;">{{infos.useAmount}}</span></span>
			</view>
			<view class="lines M-L24 M-T24"></view>
			<view class="item_one display  displaycenter_aliem M-T24">
				<span class="fn_txt3 M-L24">机显金额</span>
				<span class="fn_txt4 M-R24">￥{{infos.useAmount}}</span>
			</view>
			<view class="item_one display  displaycenter_aliem M-T24" v-if="false">
				<span class="fn_txt3 M-L24">加油优惠</span>
				<span class="fn_txt4 M-R24">-￥3.64</span>
			</view>
			<view class="item_one display  displaycenter_aliem M-T24">
				<span class="fn_txt3 M-L24">加油单价</span>
				<span class="fn_txt4 M-R24">会员价 | ￥{{infos.petrolPriceType}}/L</span>
			</view>
			<view class="item_one display  displaycenter_aliem M-T24" v-if="false">
				<span class="fn_txt3 M-L24">优惠券</span>
				<span class="fn_txt4 M-R24">未使用</span>
			</view>
			<view class="item_one display  displaycenter_aliem M-T24" v-if="false">
				<span class="fn_txt3 M-L24">服务费</span>
				<span class="fn_txt4 M-R24">未使用</span>
			</view>
		</view>
		<view class="fn_items display  displayColumn M-T24">
			<view class="item_one display  displaycenter_aliem">
				<span class="fn_txt1 M-L24">订单信息</span>
				
			</view>
			<view class="lines M-L24 M-T24"></view>
			<view class="item_one display  displaycenter_aliem M-T24">
				<span class="fn_txt3 M-L24">加油总量</span>
				<span class="fn_txt4 M-R24">{{Number(infos.volume)}}L</span>
			</view>
			<view class="item_one display  displaycenter_aliem M-T24">
				<span class="fn_txt3 M-L24">油枪油号</span>
				<span class="fn_txt4 M-R24">{{infos.gunName}} | {{infos.petrolName}}</span>
			</view>
			<view class="item_one display  displaycenter_aliem M-T24">
				<span class="fn_txt3 M-L24">支付方式</span>
				<span class="fn_txt4 M-R24">零钱支付</span>
			</view>
			<view class="item_one display  displaycenter_aliem M-T24">
				<span class="fn_txt3 M-L24">订单编号</span>
				<span class="fn_txt4 M-R24">23646544441100001</span>
			</view>
			<view class="item_one display  displaycenter_aliem M-T24">
				<span class="fn_txt3 M-L24">支付时间</span>
				<span class="fn_txt4 M-R24">{{infos.createTime}}</span>
			</view>
			<view class="item_one display  displaycenter_aliem M-T24" v-if="false">
				<span class="fn_txt3 M-L24">发票状态</span>
				<span class="fn_txt4 M-R24">未开具</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				infos:{}
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id;
			this.$modal.loading('加载中');
			this.getLists();
		},
		methods: {
			getLists(){
				this.$req.get(`/xcx/petrolCardLog/${this.id}`).then(res=>{
					// console.log(res)
					this.$modal.closeLoading();
					if(res.data.code==200){
						this.infos = res.data.data;
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.fn_items{
	width: 690rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.item_one{
	justify-content: space-between;
}
.fn_txt1{
	font-weight: 600;
	font-size: 28rpx;
	color: #212121;
}
.fn_txt2{
	font-weight: 600;
	font-size: 24rpx;
	color: #FF672D;
}
.lines{
	width: 642rpx;
	height: 0rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border: 2rpx solid #F6F6F6;
}
.fn_txt3{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_txt4{
	font-weight: 600;
	font-size: 24rpx;
	color: #212121;
}
</style>
